// TS
import * as echarts from "echarts";
import china from "@/assets/china.json";
import { cloneDeep } from "lodash";
import { ref } from "vue";
interface dataSourceType {
  [propName: string]: any;
}
const chinadata = ref<any>(cloneDeep(china));
console.log(chinadata, "word");
echarts.registerMap("china", chinadata.value);
const optionPie1: dataSourceType = {
  tooltip: {
    trigger: "item",
  },
  color: ["#1F6DED", "#12D1D1"],
  legend: {
    top: "5%",
    left: "1%",
    bottom: "30rpx",
    containLabel: true,
  },
  series: [
    {
      name: "Access From",
      center: ["40%", "50%"],
      type: "pie",
      radius: ["60%", "70%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: "center",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 14,
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 1048, name: "计算机" },
        { value: 735, name: "移动设备" },
      ],
    },
  ],
};
const optionPie: dataSourceType = {
  color: ["#1F6DED", "#12D1D1"],
  legend: {},
  tooltip: {},
  dataset: {
    source: [
      ['product', '计算机', '移动设备'],
      ['访问量', 0, 0],
      ['点赞数', 0, 0],
      ['评论数', 0, 0],
    ]
  },
  xAxis: { type: "category" },
  yAxis: {},
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [{ type: "bar" }, { type: "bar" }],
};
const optionArea: dataSourceType = {
  layoutCenter: ["60%", "70%"], //位置
  layoutSize: "120%", //大小
  aspectScale: 0.7, //宽高比
  // 进行相关配置
  tooltip: {}, // 鼠标移到图里面的浮动提示框
  // visualMap: {
  //   //左侧小柱子的配置
  //   min: 0, // 最小值
  //   max: 100, //最大值
  //   left: "left", // 定位左边
  //   top: "bottom", // 定位底部
  //   text: ["高", "低"], // 上下两个文字
  //   seriesIndex: [1],
  //   inRange: {
  //     color: ["#C4E1FF", "#73ADFF", "#4A8FFF", "#1F6BF7"],
  //   },
  //   calculable: true, // 显示与否
  // },
  visualMap: {
    type: "piecewise",
    showLabel: true,
    pieces: [
      { min: 90, label: "≥90" },
      { min: 60, max: 89, label: "60-89" },
      { min: 30, max: 59, label: "30-59" },
      { min: 0, max: 29, label: "0-29" },
    ],
    inRange: {
      color: ["#C4E1FF", "#73ADFF", "#4A8FFF", "#1F6BF7"],
    },
    seriesIndex: [1],
    left: 35,
    bottom: 35,
    textStyle: {
      color: "#8483c0",
    },
    calculable: true,
  },

  geo: {
    // 这个是重点配置区
    map: "china", // 表示中国地图
    roam: true,
    label: {
      layoutCenter: ["30%", "30%"],
      normal: {
        show: false, // 是否显示对应地名
        textStyle: {
          color: "rgba(0,0,0,0.4)",
        },
      },
    },
    // regions: [
    //   {
    //     name: "南海诸岛",
    //     itemStyle: {
    //       // 隐藏地图
    //       normal: {
    //         opacity: 0, // 为 0 时不绘制该图形
    //       }
    //     },
    //     label: {
    //       show: false // 隐藏文字
    //     }
    //   }
    // ],

    itemStyle: {
      normal: {
        borderColor: "rgba(0, 0, 0, 0.2)",
      },
      emphasis: {
        areaColor: null,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowBlur: 20,
        borderWidth: 0,
        shadowColor: "rgba(0, 0, 0, 0.5)",
      },
    },
  },
  series: [
    {
      type: "scatter",
      coordinateSystem: "geo", // 对应上方配置
    },
    // {
    //   name: "启动次数", // 浮动框的标题
    //   type: "map",
    //   geoIndex: 0,
    //   data: [{ name: "海南省", code:'111000', value: 52 },{ name: "广东省", code:'111000', value: 52 },{ name: "广东省", code:'111000', value: 52 }], // 这里就是数据，即数组可以单独放在外面也可以直接写
    // },
  ],
};

const publishTask: dataSourceType = {
  modAlProps: {
    width: "XL",
    title: "创建发布定时任务",
  },
  timingState: [
    { label: "所有", value: null },
    { label: "定时发布", value: 1 },
    { label: "未设定时发布", value: 2 },
  ],
};
const offlineTask: dataSourceType = {
  modAlProps: {
    width: "XL",
    title: "创建下线定时任务",
  },
  timingState: [
    { label: "所有", value: null },
    { label: "定时下线", value: 3 },
    { label: "未设定时下线", value: 4 },
  ],
};
const topTask: dataSourceType = {
  modAlProps: {
    width: "XL",
    title: "创建置顶定时任务",
  },
  timingState: [
    { label: "所有", value: null },
    { label: "已设定时发布", value: 2 },
    { label: "已设定时置顶", value: 5 },
    { label: "已设定时下线", value: 3 },
    { label: "未设定时内容", value: 6 },
  ],
};
export { optionPie, optionArea, publishTask, offlineTask, topTask };
